<template>
	<view class="poster">
		<swiper class="swiper" :indicator-dots="true" indicator-active-color="#FA3534" @change="change">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="item-img">
					<image :src="item" mode="" :show-menu-by-longpress="true" style="border-radius: 10rpx;width: 470rpx;height: 874rpx;"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="tips">长按图片发送好友或保存</view>
		<view class="btn">
			<u-button type="error" shape="circle" :custom-style="{height:'90rpx'}" @click="save">保存图片到相册</u-button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				index:0,
				list:[]
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			getList(){
				const that = this
				this.$u.post('/wxapi/Api/poster', {
					token: this.vuex_token.accessToken
				})
				.then(res => {
					this.list = res.data
				});
			},
			change(e){
				this.index = e.detail.current
			},
			save(){
				uni.showLoading({
					title: '正在保存',
					mask: true
				})
				uni.downloadFile({
					url:  this.list[this.index],
					success: (res) => {
						var tempFilePath = res.tempFilePath; // 这里拿到后端返回的图片路径
						uni.saveImageToPhotosAlbum({  // 然后调用这个方法
							filePath: tempFilePath,
							success : (res) => {
								uni.hideLoading();
								uni.showToast({title : '保存成功'})
							}
						})
					},
					fail: () => {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
</style>
<style lang="scss">
	.poster{
		.swiper{
			height:944rpx;
			margin-top: 50rpx;
		}
		.item-img{
			display: flex;
			justify-content: center;
			image{
				box-shadow: 4rpx 4rpx 5rpx #f5f5f5;
			}
		}
		.tips{
			margin-top: 10rpx;
			text-align: center;
			font-size: 26rpx;
			color: #999;
		}
		.btn{
			padding: 40rpx 90rpx 30rpx;
		}
	}
</style>
